import React, { useEffect, useState } from "react"
import { useImmer } from "use-immer"
import List from "./components/List/List"
import AddInput from "./components/AddInput/AddInput"
import PubSub from "pubsub-js"
// import Person from "./components/Person/Person"
// import JinZiQi from "./components/JinZiQi/JinZiQi"
import { Button, Input, Select } from "antd"

import { UserOutlined } from "@ant-design/icons"
// export default class App extends Component {
//   state = {
//     todoList: [
//       {
//         id: 1,
//         name: "aaa",
//       },
//       {
//         id: 2,
//         name: "bbbw",
//       },
//     ],
//   }

//   deleleItem = (id) => {
//     let f = this.state.todoList.filter((i) => i.id !== id)
//     this.setState({
//       todoList: f,
//     })
//   }

//   render() {
//     return (
//       <div>
//         <h1 className="person">App</h1>
//         <AddInput />
//         <List todoList={this.state.todoList} deleleItem={this.deleleItem} />

//         <Person name="1" age={111} />

//         {/* <Person name="22" age={222} /> */}

//         <JinZiQi />
//       </div>
//     )
//   }

//   componentDidMount() {
//     this.token = PubSub.subscribe("mypublish", (_, data) => {
//       let { todoList } = this.state
//       this.setState({
//         todoList: [{ id: todoList.length + 1, name: data }, ...todoList],
//       })
//       console.log(this)
//     })
//   }

//   componentWillUnmount() {
//     PubSub.unsubscribe(this.token)
//   }
// }
const { TextArea } = Input
function Count() {
  const [count, setCount] = useState(0)

  // 每一次加6
  function add() {
    setCount(count + 1)

    setCount(count + 3)

    setCount((c) => c + 3)
  }
  return (
    <>
      <Button type="primary" onClick={add}>
        count: {count}
      </Button>
    </>
  )
}

function TestObj() {
  const [obj, setObj] = useImmer({
    name: "abc",
    age: 20,
    other: { color: "red", num: 5 },
  })

  function handleChange(e) {
    // setObj({
    //   ...obj,
    //   [e.target.name]: e.target.value,
    // })
    setObj((draft) => {
      draft[e.target.name] = e.target.value
    })
  }

  function handleColorChange(e) {
    setObj({
      ...obj,
      other: {
        ...obj.other,
        color: e.target.value,
      },
    })
  }

  function handleNumChange(e) {
    // setObj({
    //   ...obj,
    //   other: {
    //     ...obj.other,
    //     num: e.target.value,
    //   },
    // })
    // obj.other.num = 10
    setObj((draft) => {
      console.log(draft)
      draft.other.num = e.target.value
    })
    // console.log(obj)
  }

  return (
    <>
      <h1>{JSON.stringify(obj)}</h1>
      <TextArea
        prefix={<UserOutlined />}
        name="name"
        size="small"
        value={obj.name}
        onChange={handleChange}
        placeholder="name"
        allowClear
      ></TextArea>
      <Input
        name="age"
        value={obj.age}
        onChange={handleChange}
        placeholder="age"
      ></Input>
      <Input
        name="color"
        value={obj.other.color}
        onChange={handleColorChange}
        placeholder="color"
      ></Input>

      <Input
        name="num"
        value={obj.other.num}
        onChange={handleNumChange}
        placeholder="num"
      ></Input>

      <Select
        showSearch
        defaultValue="aaa"
        style={{
          width: 300,
        }}
        allowClear
        options={[
          {
            value: "lucy",
            label: "Lucy",
          },
          {
            value: "aaa",
            label: "a",
          },
        ]}
      />
    </>
  )
}

export default function App() {
  const [todoList, setToDoList] = useState([
    {
      id: 1,
      name: "aaa",
    },
    {
      id: 2,
      name: "bbbw",
    },
  ])

  let [token] = useState("")
  // let token = ""
  let a = "sss"
  useEffect(() => {
    console.log("App mounted")

    token = PubSub.subscribe("mypublish", (_, data) => {
      setToDoList([{ id: todoList.length + 1, name: data }, ...todoList])
    })
    console.log(token)
    return () => {
      console.log("App beforeDestroy")

      PubSub.unsubscribe(token)
    }
  }, [todoList, token])

  function deleleItem(id) {
    let f = todoList.filter((i) => i.id !== id)
    setToDoList(f)
  }

  return (
    <div>
      <h1 className="person">App</h1>
      <div>{a}</div>
      <div>{JSON.stringify(token)}</div>
      <div>{JSON.stringify(todoList)}</div>
      <AddInput />
      <List todoList={todoList} deleleItem={deleleItem} />

      {/* <Person name="1" age={111} /> */}

      {/* <Person name="22" age={222} /> */}

      {/* <JinZiQi /> */}

      <Count />

      <TestObj />
    </div>
  )
}
